<template>
<div>
  <div class="box box-custom">
    <div class="box-header with-border">
      <h3 class="box-title">评估结果统计</h3>
      <!-- button type="button" class="btn btn-custom pull-right" v-on:click="showAdd()"></button -->
    </div>
    <div class="box-body">
      <div class="clearfix bottom10">
        <div class="pull-left searchBox">
        </div>
        <div class="pull-right userLogo left10">
          <img class="img-thumbnail" :src="$store.getters.getUserData.logo" alt="logo" />
        </div>
      </div>
      <div class="clearfix">
        <div class="pull-left chartBox border">
          <echart :options="ageRangeOption"></echart>
        </div>
        <div class="pull-left chartBox border" style="margin-left: 1%;">
          <echart :options="scoreRangeOption"></echart>
        </div>
      </div>
      <div class="clearfix top10">
        <div class="pull-left chartBox border">
          <echart :options="secondCategoryScoreAvgOption"></echart>
        </div>
        <div class="pull-left chartBox border" style="margin-left: 1%;">
          <echart :options="organizationCustomerCountOption"></echart>
        </div>
      </div>
    </div>
  </div>
  <el-dialog width="60%"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  </el-dialog>
</div>
</template>
<script>
import echart from '../components/ECharts.vue'
export default {
  name: 'homePage',
  data () {
    return {
      dialogVisible: false,
      dialogTitle: '',
      ageRangeOption: {
        // color: ['#99CC99','#66CC99','#99CC00','#339933','#669933','#339966','#006633','#003300'],
        title: {
          text: '年龄分布'
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '10px',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: []
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b},{a}:{c} <br/>({d}%)"
        },
        series: [{
          name:'人数',
          type:'pie',
          barWidth: '30%',
          data:[]
        }]
      },
      // 评分范围分布
      scoreRangeOption: {
        // color: ['#99CC99','#66CC99','#99CC00','#339933','#669933','#339966','#006633','#003300'],
        title: {
          text: '健康评分范围统计'
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '10px',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: []
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}, {a}:{c} <br/>({d}%)"
        },
        series: [{
          name:'评估数',
          type:'pie',
          barWidth: '30%',
          data:[]
        }]
      },
      // 二级评估类型平均得分
      secondCategoryScoreAvgOption: {
        // color: ['#669933'],
        title: {
          text: '二级评估类型平均得分'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {          // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              //横轴信息全部显示
              interval:0,
              // -30度角倾斜显示
              rotate:-60 
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [{
          name:'平均得分',
          type:'bar',
          barWidth: '30%',
          data:[]
        }]
      },
      // 机构客户数量
      organizationCustomerCountOption: {
        // color: ['#669933'],
        title: {
          text: '机构客户数量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {          // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [{
          name:'客户总数',
          type:'bar',
          barWidth: '30%',
          data:[]
        }]
      }
    }
  },
  props: {
  },
  components: {
    echart
  },
  methods: {
    showAdd () {
      this.dialogTitle = '新建问卷'
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    getAgeRangeData () {
      this.$http.get('cutomer/getAgeRangeCharts').then(
        response =>{
          if (response.data.message === 'ok') {
            let xAxisData = []
            let seriesData = []
            for ( let key in response.data.data) {
              xAxisData.push(key)
              seriesData.push({name: key, value: response.data.data[key]})
            }
            this.ageRangeOption.series[0].data = seriesData
            this.ageRangeOption.legend.data = xAxisData
          }
        }
      )
    },
    getScoreRangeData () {
      this.$http.get('statistics/heathResultCount').then(
        response =>{
          if (response.data.message === 'ok') {
            let xAxisData = []
            let seriesData = []
            response.data.data.map(
              (item) => {
                xAxisData.push(item.level)
                seriesData.push({name: item.level, value: item.total})
              }
            )
            this.scoreRangeOption.series[0].data = seriesData
            this.scoreRangeOption.legend.data = xAxisData
          }
        }
      )
    },
    getSecondCategoryScoreAvgData () {
      this.$http.get('statistics/twoLevelCategoryAvg').then(
        response =>{
          if (response.data.message === 'ok') {
            let xAxisData = []
            let seriesData = []
            response.data.data.map(
              (item) => {
                xAxisData.push(item.cateName)
                seriesData.push(item.avgScore)
              }
            )
            this.secondCategoryScoreAvgOption.series[0].data = seriesData
            this.secondCategoryScoreAvgOption.xAxis[0].data = xAxisData
          }
        }
      )
    },
    getOrganizationCustomerCountData () {
      this.$http.get('statistics/organizationCount').then(
        response =>{
          if (response.data.message === 'ok') {
            let xAxisData = []
            let seriesData = []
            response.data.data.map(
              (item) => {
                xAxisData.push(item.organizationName)
                seriesData.push(item.totalCount)
              }
            )
            this.organizationCustomerCountOption.series[0].data = seriesData
            this.organizationCustomerCountOption.xAxis[0].data = xAxisData
          }
        }
      )
    }
  },
  watch: {
    // 监听参数变化
    options: {
      handler: function(val) {
        this.options = val;
        this.renderCharts();
      },
      // 深度观察
      deep: true
    }
  },
  beforeCreate () {},
  created () {
  },
  beforeMount () {},
  mounted () {
    this.getAgeRangeData()
    this.getScoreRangeData()
    this.getSecondCategoryScoreAvgData()
    this.getOrganizationCustomerCountData()
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartBox{width: 49.5%; height: 260px;}
</style>
